//模态框表单组件
import React from "react"
import { Modal, Form, Input, Select, Button} from 'antd'
import styles from "./Styles.less"

const FormItem = Form.Item
const Option = Select.Option
const TextArea = Input.TextArea

class ModelForm extends React.Component {
    constructor () {
        super()
        //控制模态框组件的显示
        this.state = {
            isShow: false,
        }
    }

    //弹出
    showModal = () => { this.setState({ isShow: true }) }

    //隐藏
    hideModal = () => { this.setState({ isShow: false }) }

    //点击确认事件(可以在该事件中获取表单数据)
    onOkHandler = (e) => {
        e.preventDefault()
        const { onOk } = this.props
        const { getFieldsValue } = this.props.form
        this.props.form.validateFields((err) => {
            if (!err) {
                let fields = getFieldsValue()
                onOk(fields)   //父组件中定义
                this.hideModal()
                //TODO 清空表单数据 校验时无法显示提示信息 函数调用位置需要调整
                this.props.form.resetFields()
            }
        })
    }

    //取消按钮事件
    cancelHandler = (e) => {
        e.preventDefault()
        this.hideModal()
        this.props.form.resetFields()
    }

    //返回DOM元素
    render () {

        const { children } = this.props //通过Props获取本组件的属性

        const { getFieldDecorator } = this.props.form  //通过this.props可以获得antd提供的form
        
        const { code , code_nature , msg } = this.props.record

        // console.log(this.props.record)

        //定义布局
		let formItemLayout = {
			labelCol: { span: 6 },
			wrapperCol: { span: 14 },
        }

        return (
            <span>
                <span onClick={this.showModal}> 
                    {children}
                </span>
                <Modal
                    className={styles.antModalStyle}
                    title="创建状态码"
                    visible={this.state.isShow}
                    onCancel={this.cancelHandler}
                    // onOk={this.onOkHandler}
                    centered
                    footer={[
                      <div style={{textAlign:"center"}} key="key">
                         <Button key="submit" type="primary"
                           onClick={this.onOkHandler}>提交</Button>
                         <Button key="cancle" className={styles.modalFooter}
                           onClick={this.cancelHandler}>取消</Button>
                      </div>,
                    ]}>

                    {/* 状态码：只支持数字及英文
                        说明：文本框，限制字数为50 */}
                    <Form>
                        <FormItem label="状态码：" {...formItemLayout}>
                            {getFieldDecorator('code', {
                                initialValue: code,
                                rules:[{
                                    required: true,
                                    pattern: /^[0-9a-zA_Z]+$/,
                                    message: '请输入正确的状态码(数字及字母)',
                                    trigger: 'onBlur',
                                }],
                            })(
                                <Input placeholder="输入状态码" />
                            )}
                        </FormItem>
                        <FormItem label="性质：" {...formItemLayout}>
                            {getFieldDecorator('code_nature', {
                                initialValue: (code_nature === 1 || !code_nature ) ? "成功" : "失败",
                                rules:[{
                                    required: true,
                                    message: '请选择状态码性质',
                                    trigger: 'onBlur',
                                }],
                            })(
                                <Select>
                                    <Option value="1">成功</Option>
                                    <Option value="0">失败</Option>
                                </Select>
                            )}
                        </FormItem>
                        <FormItem label="说明：" {...formItemLayout}>
                            {getFieldDecorator('msg', {
                                initialValue: msg,
                                rules:[{
                                    required: true,
                                    message: '请输入状态码说明',
                                }],
                            })(
                                <TextArea placeholder="输入状态码说明" autosize={{minRows: 4}}>
                                </TextArea>
                            )}
                        </FormItem>
                    </Form>
                </Modal>
            </span>
        )
    }
}

export default Form.create()(ModelForm)